import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './style.css'
import LoginPage from './components/LoginPage.vue'
import JDHomepage from './components/JDHomepage.vue'
import InventoryPage from './components/InventoryPage.vue'
import PhonePurchasePage from './components/PhonePurchasePage.vue'

// 全局应用实例
let currentApp: any = null

// 页面管理器
class PageManager {
  private container: HTMLElement

  constructor() {
    this.container = document.querySelector<HTMLDivElement>('#app')!
  }

  // 显示登录页面
  showLoginPage() {
    if (currentApp) {
      currentApp.unmount()
    }
    currentApp = createApp(LoginPage)
    currentApp.use(ElementPlus)
    currentApp.mount(this.container)
  }

  // 显示京东首页
  showHomePage() {
    if (currentApp) {
      currentApp.unmount()
    }
    currentApp = createApp(JDHomepage)
    currentApp.use(ElementPlus)
    currentApp.mount(this.container)
  }

  // 显示库存管理页面
  showInventoryPage() {
    if (currentApp) {
      currentApp.unmount()
    }
    currentApp = createApp(InventoryPage)
    currentApp.use(ElementPlus)
    currentApp.mount(this.container)
  }

  // 显示手机购买页面
  showPhonePurchasePage() {
    if (currentApp) {
      currentApp.unmount()
    }
    currentApp = createApp(PhonePurchasePage)
    currentApp.use(ElementPlus)
    currentApp.mount(this.container)
  }
}

// 创建页面管理器实例
const pageManager = new PageManager()

// 初始显示登录页面
pageManager.showLoginPage()

// 将页面管理器挂载到全局，供组件使用
;(window as any).pageManager = pageManager

